<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <el-tab-pane label="角色管理">
            <el-row>
              <el-button type="primary">+ 新增角色</el-button>
            </el-row>
            <el-table
              :data="tableData"
              style="width: 100%"
            >
              <el-table-column
                label="序号"
                width="200"
                type="index"
              />
              <el-table-column
                label="角色名称"
                width="400"
                prop="name"
              />
              <el-table-column
                label="描述"
                width="400"
                prop="description"
              />
              <el-table-column label="操作">
                <template>
                  <el-button
                    size="mini"
                    type="success"
                  >分配权限</el-button>
                  <el-button
                    size="mini"
                  >编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-row type="flex" justify="end" style="margin:15px">
              <el-pagination
                :page-size="q.pagesize"
                layout="total, prev, pager, next"
                :total="total"
                @current-change="handleCurrentChange"
              />
            </el-row>
          </el-tab-pane>

          <el-tab-pane label="公司设置">公司设置</el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getRoles } from '@/api/employees'
export default {
  data() {
    return {
      q: {
        page: 1,
        pagesize: 5
      },
      total: 0,
      tableData: []
    }
  },
  created() {
    this.initRoles()
  },
  methods: {
    async initRoles() {
      try {
        const { data } = await getRoles(this.q)
        this.tableData = data.rows
        this.total = data.total
      } catch (err) {
        return err
      }
    },
    handleCurrentChange(num) {
      this.q.page = num
      this.initRoles()
    }
  }
}
</script>
